<template>
  <div class="box">
    <el-card>
      <el-descriptions
        class="margin-top"
        title="我的个人信息"
        :column="3"
        :size="size"
        border
      >
        <template #extra>
          <el-button type="primary" @click="openDialog()">编辑</el-button>
          <el-button type="primary" @click="openPwdDialog()"
            >修改密码</el-button
          >
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              用户名
            </div>
          </template>
          {{ userInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              手机号
            </div>
          </template>
          {{ userInfo.mobile }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Open />
              </el-icon>
              状态
            </div>
          </template>
          {{ userInfo.status === 1 ? "正常" : "禁用" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              昵称
            </div>
          </template>
          <el-tag size="small">{{ userInfo.nickname }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Message />
              </el-icon>
              邮箱
            </div>
          </template>
          {{ userInfo.email }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Female />
              </el-icon>
              性别
            </div>
          </template>
          <el-tag v-if="userInfo.gender === 1" size="small">男</el-tag>
          <el-tag v-if="userInfo.gender === 2" size="small">女</el-tag>
          <el-tag v-if="userInfo.gender === 0" size="small">未知</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      append-to-body
      @close="closeDialog"
    >
      <!-- 用户新增/编辑表单 -->
      <el-form
        ref="userFormRef"
        :model="userInfo"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            disabled
            v-model="userInfo.username"
            :readonly="!!userInfo.id"
            placeholder="请输入用户名"
          />
        </el-form-item>

        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="userInfo.nickname" placeholder="请输入用户昵称" />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <dictionary v-model="userInfo.gender" type-code="gender" />
        </el-form-item>

        <el-form-item label="手机号码" prop="mobile">
          <el-input
            v-model="userInfo.mobile"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="userInfo.email"
            placeholder="请输入邮箱"
            maxlength="50"
          />
        </el-form-item>
      </el-form>

      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="pwdDialog.visible"
      :title="pwdDialog.title"
      append-to-body
      @close="closePwdDialog"
    >
      <!-- 用户新增/编辑表单 -->
      <el-form
        ref="pwdFormRef"
        :model="pwdForm"
        :rules="pwdRules"
        label-width="80px"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
            v-model="pwdForm.oldPwd"
            placeholder="请输入原密码"
            type="password"
            show-password
          />
        </el-form-item>

        <el-form-item label="新密码" prop="newPwd">
          <el-input
            v-model="pwdForm.newPwd"
            placeholder="请输入新密码"
            type="password"
            show-password
          />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input
            v-model="pwdForm.confirmPwd"
            placeholder="请输入确认密码"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>

      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updatePwd">修改</el-button>
          <el-button @click="closePwdDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { getInfoAPI, updateUser, changePwdAPI } from "@/api/user/index";
import router from "@/router";
import type { ComponentSize } from "element-plus";
import {
  Iphone,
  Tickets,
  User,
  Message,
  Open,
  Female,
} from "@element-plus/icons-vue";
import {} from "@/api/user";

const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

const pwdRules = reactive({
  oldPwd: [{ required: true, message: "源密码不能为空", trigger: "blur" }],
  newPwd: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
  confirmPwd: [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== pwdForm.value.newPwd) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      required: true,
      trigger: "blur",
      message: "两次输入的密码不一致",
    },
  ],
});

const size = ref<ComponentSize>("default");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});
const blockMargin = computed(() => {
  const marginMap = {
    large: "32px",
    default: "28px",
    small: "24px",
  };
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  };
});

const userInfo = ref<UserForm>({});

const getUserInfo = async () => {
  const res = await getInfoAPI();
  userInfo.value = res.data;
};

const dialog = reactive({
  visible: false,
  title: "编辑个人信息",
});

const openDialog = () => {
  dialog.visible = true;
};

function closeDialog() {
  dialog.visible = false;
}

const userFormRef = ref();

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      updateUser(userInfo.value.id, userInfo.value).then(() => {
        ElMessage.success("修改用户成功");
        getUserInfo();
        dialog.visible = false;
      });
    }
  });
}, 3000);

const pwdFormRef = ref();
const pwdForm = ref<{ oldPwd: string; newPwd: string; confirmPwd: string }>({
  oldPwd: "",
  newPwd: "",
  confirmPwd: "",
});

const pwdDialog = reactive({
  visible: false,
  title: "修改密码",
});
const openPwdDialog = () => {
  pwdDialog.visible = true;
};
const closePwdDialog = () => {
  pwdDialog.visible = false;
};

const updatePwd = () => {
  pwdFormRef.value.validate((valid: any) => {
    if (valid) {
      changePwdAPI(pwdForm.value).then(() => {
        ElMessage.success("修改密码成功");
        pwdDialog.visible = false;
      });
    }
  });
};

onMounted(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.box {
}
</style>
